<!--
    by: yuanbiao 2019年12月23日
    name: x-button
    notes:
-->
<template>
  <div
    :class="[
      prefixCls,`${prefixCls}-${type}`,`${prefixCls}-${size}`,
      {'is-block': block, 'is-plain': plain, 'is-disabled': (disabled || loading)}
    ]"
    :disabled="disabled || loading"
    @click="clickHandler"
  >
    <div :class="`${prefixCls}__content`">
      <i v-if="loading" :class="[`${prefixCls}__loading`]"></i>
      <i v-else-if="icon" :class="icon"></i>
      <slot></slot>
    </div>
    <div :class="`${prefixCls}__border--line`"></div>
    <div :class="`${prefixCls}__border--rect`"></div>
  </div>
</template>

<script>
const prefixCls = 'x-button'
export default {
  name: 'x-button',
  props: {
    type: {
      type: String,
      default: 'default' // default|primary|info|success|warning|danger|brown
    },
    size: {
      type: String,
      default: 'default' // default|large|small
    },
    icon: {
      type: String,
      default: ''
    },
    block: {
      type: Boolean,
      default: false // true(宽度100%)
    },
    plain: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      prefixCls: prefixCls
    }
  },
  methods: {
    clickHandler () {
      if (this.disabled || this.loading) return
      this.$emit('click')
    }
  }
}
</script>
